<!--
 * @Author: zhangyonggui
 * @Date: 2023-10-07 10:38:26
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2023-12-02 15:28:49
 * @Descripttion: 
-->
<template>
  <div class="reference">
    <div class="reference-title" style="margin-bottom: 20px">高级查询</div>
    <!-- 说明 -->
    <p v-for="explain in explains" :key="explain">{{ explain }}</p>
    <!-- 表单 -->
    <div class="reference-title" style="margin-top: 20px">
      <div style="width: 300px">例句</div>
      <div class="desc">用途说明</div>
    </div>

    <div v-for="mod in typeList" :key="mod.value" class="reference-table">
      <div class="reference-table-title">{{ mod.label }}高级查询参数：</div>
      <div
        v-for="row in advancedSearchOpts[mod.value]"
        :key="row.signValue"
        class="reference-table-row"
      >
        <div style="width: 300px">{{ row.signValue }}== "{{ 'xxxx' }}"</div>
        <div>
          从{{ mod.label }}系统中搜索 {{ row.label }} 精准匹配 "{{ 'xxxx' }}"
          的数据
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { typeMap, typeList } from '../common';
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const explains = ref([
  `1. 逻辑符号： && 表示"且"关系、 || 表示"或"关系、 ( ) 表示条件组。`,
  `2. 匹配符号： == 表示"精准匹配"、 = 表示"匹配"、 =^ 表示"开始为"、 =$
        表示"结尾为"、 =! 表示"不匹配"、 ==! 表示"精准不匹配"、 =!^ 表示"开始不为"、
        =!$ 表示"结尾不为"、 === 表示"模糊匹配"、 =* 表示"通配符匹配"、=*! 表示"非通配符匹配"。`,
  `3.
        匹配与模糊匹配有所区别，匹配的是词语，而模糊匹配匹配的是逐个字符。`,
  `4. 资产特有字段: 当搜索语法中某个子条件是某类资产特有字段时，子语句过滤规则只会对当前类型资产有效, 其他类型的资产会忽略此子语句。`,
  `5. 通用字段: company，tag等无资产类型前缀修饰的key会对所有类型资产查询生效。`,
  `6. Value说明: 查询的Value均需要放在""内，例如tag=* "*xxx*", tag="xxx"。`,
  `7. 各模块查询参数名称请参考以下表格。`,
]);
const advancedSearchOpts = ref({});
const advancedSearchOptss = async () => {
  await store.dispatch('expose/setAdvancedSearchOpts');
  advancedSearchOpts.value = store.state.expose.advancedSearchOpts;
};
onMounted(() => {
  advancedSearchOptss();
});
</script>
<style lang="scss" scoped>
.reference {
  height: 600px;
  overflow-y: auto;
  &-title {
    display: flex;
    margin-block: 5px 0;
    font-size: 14px;
    font-weight: 600;
  }
  p {
    font-size: 12px;
    line-height: 18px;
    color: #8590b3;
  }
  &-table {
    &-title {
      margin-top: 20px;
      color: $-v-color-primary;
    }
    &-row {
      display: flex;
      color: #8590b3;
      line-height: 40px;
      border-bottom: 1px solid;
      border-image: radial-gradient(circle, #21242d, rgba(33, 36, 45, 0)) 1 1;
    }
  }

  .reference-title {
    div {
      color: $-v-color-primary;
    }
  }
}
</style>
